<template>
	<div class="footer-box" v-if="showhead">
		<div class="f-t ct">
			<div class="h-nav">
				<div class="nav-item" 
					:class="{ active: isActive(item)} "
					@click="to(item)" 

					v-for="item in dataList.tabbar" :key="item.name">
					{{ item.name }}
				</div>
			</div>
			<div class="f-search" @click="to({url: '/sh'})">
				<Search class="s-ico"/>
				<el-input
					v-model="input1"
					style="width: 200px"
					size="large"
					class="s-input"
					readonly
				/>
			</div>
		</div>
		<div class="f-b ct">
			<div class="b-c">
				<div class="copyright">@2025 河南科技小院 版权所有</div>
				
				<div class="f-c">
					<div class="quick-title">友情链接:</div>
					<div class="quick-links">
						<div class="link-row">
							<a href="https://www.moa.gov.cn/">中华人民共和国农业农村部</a>
							<a href="https://nynct.henan.gov.cn/">河南省农业农村厅</a>
							<a href="https://www.cast.org.cn/">中国科协技术协会</a>
						</div>
						<div class="link-row">
							<a href="https://www.hast.net.cn/">河南省科学技术协会</a>
							<a href="https://www.zgnjx.org.cn/">中国农技协</a>
							<a href="https://stb.mae.edu.cn/">全国科技小院服务管理平台</a>
						</div>
						<div class="link-row">
							<a href="http://www.henankejixiaoyuan.com/">河南科技小院</a>
							<a href="https://www.henau.edu.cn/">河南农业大学</a>
							<a href="https://kjhzglb.henau.edu.cn/">河南农业大学社会服务处</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	import {
		reactive,ref,computed
	} from 'vue';
	import { Search } from '@element-plus/icons-vue'
	const router = useRouter()

	const dataList = reactive({
		tabbar: [
			{
				name: '首页',
				url: '/home'
			},
			{
				name: '工作动态',
				url: '/job'
			},
			{
				name: '站院地图',
				url: '/map'
			},
			{
				name: '驻站专家',
				url: '/specialist'
			},
			{
				name: '农事问答',
				url: '/nsqa'
			},
			// {
			// 	name: '站院风采',
			// 	url: '/zyfc'
			// },
			{
				name: '通知公告',
				url: '/notic'
			},
			{
				name: '联建课堂',
				url: '/zygx'
			},
		]
	})
	const to = (item) => {
		console.log(item, router)
		router.push(item.url)
	}
	const rootName = computed(()=> {
		return router.currentRoute.value.path
	})
	const isActive = (item) => {
		console.log(rootName?.value, item.url)
		return rootName?.value.includes(item.url)
	}
	const showhead = computed(() => {
		return router.currentRoute.value?.meta?.id !== -1
	})
</script>
<style lang="scss" scoped>
	.footer-box{
		width: 100%;
		background-color: #068043;
		color: #fff;
		height: 285px;
		.f-t {
			height: 110px;
			padding: 0 14%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.h-nav {
				display: flex;
				height: 100%;
				align-items: center;
				justify-content: space-around;
				flex: 1;
				border-bottom: 1px solid #6bc235;
				.nav-item {
					font-size: 20px;
					color: #fff;
					cursor: pointer;
					&.active {
						color: #4af8a1;
						border-bottom: 2px solid #4af8a1;
						padding-bottom: 5px;
					}
				}
			}
			.f-search {
				width: 250px;
				font-size: 20px;
				display: flex;
				height: 100%;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #6bc235;
				cursor: pointer;

				.s-ico {
					width: 30px;
					color: #6bc235;
					margin-right: 20px;
				}
				.s-input {
					:deep(.el-input__wrapper) {
						border-radius: 30px !important;
						.el-input__inner {
							cursor: pointer;
						}
					}
				}
			}
		}
		.f-b {
			color: #fff;
			padding: 30px 14% 0;
			font-size: 20px;
			.b-c {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				opacity: 0.6;
				padding-left: 20px;
				
				.copyright {
					flex-shrink: 0;
					margin-right: 60px;
					width: 320px;
				}
				
				.f-c {
					display: flex;
					align-items: flex-start;
					flex-shrink: 0;
					width: 950px;
					
					.quick-title {
						flex-shrink: 0;
						margin-right: 30px;
						white-space: nowrap;
					}
					
					.quick-links {
						flex: 1;
						
						.link-row {
							display: flex;
							margin-bottom: 15px;
							
							&:last-child {
								margin-bottom: 0;
							}
							
							a {
								flex: 1;
								margin-right: 25px;
								color: white;
								text-decoration: none;
								transition: color 0.3s ease;
								text-align: left;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 20px;
								
								&:last-child {
									margin-right: 0;
								}
								
								&:hover {
									color: #4af8a1;
								}
							}
						}
					}
				}
			}
		}
		
	}
</style>